<template>
  <div class="nav">
    <!-- 顶部选项卡开始 -->
    <!-- 顶部选项卡开始 -->
    <van-nav-bar title="菜谱分类" @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#000" size="22" />
      </template>
      <template #right>
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      </template>
    </van-nav-bar>
    <!-- 顶部选项卡结束 -->
    <!-- 内容区域开始 -->
    <div class="content-container">
      <!-- 侧边选项卡开始 -->
      <van-row>
        <van-col class="content-container-sidebar" span="5">
          <van-sidebar v-model="activeKey" @change="onChange" class="nav-left">
            <van-sidebar-item v-for="item of catalog" @click="()=>onCatalogClick(item.key)" :key="item.key" :title="item.name" />
          </van-sidebar>
        </van-col>
        <van-col class="catalog-detail" span="19">
          <div class="catalog-detail-content" v-for="item of catalogDetail" :key="item.key">
            <div class="top top-title" v-if="item.title">
              <p class="desc">{{item.title}} ></p>
              <div class="my-img">
                <van-image round width="10vmin" height="10vmin" :src="item.cover" />
              </div>
            </div>
            <van-row style="margin-top: 12px">
              <van-col v-for="(detail, i) of item.list" :key="i">
                <router-link to="/" class="myli">
                  <div class="bottom">
                    <a class="scbubn">{{ detail }}</a>
                  </div>
                </router-link>
              </van-col>
            </van-row>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import menu from "@/mock/data";

export default {
  data () {
    console.log(this)
    return {
      showShare: false,
      activeKey: 0,
      test: 1,
      catalog:[
        {
          name:'热门',
          key:'hot'
        },
        {
          name:'肉类大全',
          key:'meat'
        },        {
          name:'菜式菜系',
          key:'cuisine'
        },        {
          name:'蔬菜',
          key:'vegetables'
        },        {
          name:'水产海鲜',
          key:'seafood'
        },
        {
          name:'主食',
          key:'sf'
        },
        {
          name:'烘培',
          key:'baking'
        },
        {
          name:'蛋奶豆制品',
          key:'emb'
        },
        {
          name:'烹饪方法',
          key:'cm'
        },
        {
          name:'厨具',
          key:'kw'
        },
        {
          name:'食疗养生',
          key:'health'
        },
        {
          name:'米面杂粮',
          key:'cereals'
        },
        {
          name:'母婴',
          key:'mnb'
        },
        {
          name:'口味',
          key:'flavor'
        },
      ],
      catalogDetail:menu['hot'],
      homeCook: [
        "可乐鸡翅",
        "红烧肉",
        "糖醋排骨",
        "鱼香肉丝",
        "红烧排骨",
        "宫保鸡丁",
        "西红柿炒鸡蛋",
        "清蒸鲈鱼",
        "麻婆豆腐",
      ],
      bottomCook: [
        "酸菜鱼",
        "油闷大虾",
        "家常菜",
        "糖醋里脊",
        "水煮肉片",
        "麻辣香锅",
        "京酱肉丝",
        "回锅肉",
        "锅包肉",
      ],

      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    onClickLeft () {
      //跳转回首页
      this.$router.go(-1);
    },
    onSelect (option) {
      Toast(option.name);
      this.showShare = false;
    },
    onChange (index,...rest) {
      const key = this.catalog[index]?.['key']
      if(key) this.catalogDetail=menu[key]
    },
    /**
     * 点击分类获取相应数据
     * @param catalog
     */
    onCatalogClick(catalog){
      const data = menu[catalog]
      if(data){
        this.catalogDetail = data
      }
      console.log(data)
    }
  },
};
</script>
<style>
@import "../assets/css/details.css";
.nav {
  width: calc(100vw);
  height: calc(100vh);
  overflow: hidden;
}
</style>